<template>
 <!--
    form 数据

    formLabel 数据标签  = [{
    model: 模型数据 form[item.model],
    label: 标签名,
    required: 是否为必填项,
    rules: 表单验证规则
    labelOFF: label 标签显示开关 默认:开
    options:[{value:'值',label:'标签'}]
    }]

    默认 type input输入框
    type = select  select下拉框
    type = switch   switch按钮

    下拉框 内部数据 options:[value:'值',label:'标签']

    formConfig 表单配置 = {
      inline="true"  表示 行内表单
      labelWidth="80px"  表单 宽度
      labelPosition="left/right" 表单标签 左对齐/右对齐
    }

-->
  <div>
  <el-form :inline="formConfig.inline"
           ref="form"
           :model="form"
           :rules="formConfig.rules"
           :label-position="formConfig.labelPosition"
           :label-width="formConfig.labelWidth || '120px'"
           >
      <el-form-item v-for="item in formLabel"
              class="el-form-item"
              :key="item.model"
              :required="item.required || false"
              :prop="item.model"
              :label="item.labelOFF == 'off' ? '' : item.label"
                    :label-width="item.labelWidth"
                    :style="`width:${item.width}%;max-width:22rem;`"
              >

              <!-- 输入框 -->
              <el-input v-model.trim="form[item.model]"
                        :placeholder="item.placeholder? `${item.placeholder}`:`请输入${item.label}`"
                        :prefix-icon="item.icon"
                        :disabled="!!(item.disable)"
                        v-if="!item.type"
                        clearable
                        @blur="blurInput(form[item.model])">
                <template slot="append"
                          v-if="item.tip">{{item.tip}}</template>
              </el-input>

              <!-- textarea -->
              <el-input v-model.trim="form[item.model]"
                        :placeholder="item.placeholder? `${item.placeholder}`:`请输入${item.label}`"
                        type="textarea"
                        :rows="item.rows"
                        v-if="item.type === 'textarea'"
                        @blur="blurInput(form[item.model])">
              </el-input>

              <!-- 密码输入框 -->
              <el-input v-model.trim="form[item.model]"
                        :placeholder="'请输入' + item.label"
                        v-if="item.type === 'password'"
                        show-password>
              </el-input>

              <!-- select -->
              <el-select v-model="form[item.model]"
                         :placeholder="'请选择'+item.label"
                         v-if="item.type === 'select'"

                >
                <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
<!--        楼栋select-->
              <el-select v-model="form[item.model]"
                         placeholder="请选择楼栋"
                         v-if="item.type === 'buildingSelect'"
                         clearable

              >
                <el-option v-for="item in $store.getters.changeBuildingList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"
                ></el-option>
              </el-select>
              <!-- upload -->
              <el-upload
                v-if="item.type === 'upload'"
                class="avatar-uploader"
                action="#"
                :http-request="function(datas){ return uploadImg(item.imgType, datas.file, item.model) }"
                :show-file-list="false">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

              <!-- 省市区三级联动 -->
              <el-cascader
                size="large"
                :placeholder="item.placeholder? `${item.placeholder}`:`请输入地区`"
                v-if="item.type === 'cascaderArea'"
                :options="options"
                v-model.trim="form[item.model]"
                @change="handleChange()">
              </el-cascader>
<!--           常规级联选择器-->
              <el-cascader
                v-if="item.type === 'cascader' "
                :placeholder="'请选择'+item.label"
                v-model.trim="form[item.model]"
                :options="item.options"
                filterable
                :props="item.props"
                clearable
              >
              </el-cascader>
<!--        学校/校区级联选择器-->
              <el-cascader
                clearable
                v-if="item.type === 'campusCascader'"
                placeholder="请选择学校/校区"
                v-model.trim="form[item.model]"
                filterable
                :props="item.props"
                :options=$store.getters.changeList
              >
              </el-cascader>
<!--        日期选择器-->
              <el-date-picker
                v-if="item.type === 'data'"
                :placeholde="'请选择'+item.label"
                :type="item.date"
                v-model.trim="form[item.model]"
                :picker-options="pickerOptions"
                :value-format="item.format"
              >
a       </el-date-picker>

              <el-tree
                v-if="item.type === 'tree'"
                :data="form[item.model]"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="item.props">
              </el-tree>
      </el-form-item>
      <slot></slot>
  </el-form>
  </div>

</template>

<script>
// 引入 省市区三级联动数据组件
import { regionData, CodeToText } from 'element-china-area-data';
//校区id列表
import {getCampusList} from "api/other/campusList";
//上传图片接口
import {uploadImg} from "api/other/uploadImg";

export default {
  props: {
    form: Object,
    formLabel: Array,
    formConfig: Object,
  },

  // beforeMount() {
  // },

  data() {
    return{
      options: regionData,
      imageUrl:"",
      pickerOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }
    }
  },
  methods:{
     // 失去焦点 自动保存
    blurInput (value) {
      this.$emit('blurInput', value)
    },
    // 合并地址
    mergeArea(value, model) {
      this.form[model] = value.join('')
    },
    // 省市区三级联动 选中地址
    handleChange (val) {
    },
    // 上传图片方法
    uploadImg(type, file, model) {
      uploadImg(type, file).then(res => {
        const resData = res.data
        if(resData.code == 200) {
          this.form[model] = resData.data.
          this.imageUrl = resData.data
        }

      })
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
/deep/ .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
        }
/deep/ .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
        }
/deep/ .avatar {
          width: 100px;
          height: 100px;
          display: block;
        }
</style>
